<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" href="css/index.css">
		<link rel="stylesheet" href="css/touwei.css">
		<script src="js/vue.js"></script>
	</head>
	<body>
		<!-- 头部导航 -->
		<div id="nav">
			<div class="nav_top">
				<div class="nav_img">
					<img src="img/navlogo.png" alt="">
				</div>
				<div class="nav_ul">
					<ul>
						<li><a href="#" class="high">首页</a></li>
						<li><a href="introduce.html">公司介绍</a></li>
						<li><a href="project.html">我们的项目</a></li>
						<li><a href="instru.html">我们的仪器</a></li>
						<li><a href="advantage.html">我们的优势</a></li>
						<li><a href="team.html">医师团队</a></li>
					</ul>
				</div>
				<div class="nav_input">
					<input type="text">
					<img src="img/fdj.jpg" alt="">
				</div>
			</div>

		</div>

		<!-- 主体部分 -->
		<div class="mainOne">
			<p class="mainOne_pone">医疗美容</p>
			<p class="mainOne_ptwo">
				Medical
				cosmetology
			</p>
			<div class="mainOne_div">
				<a href="../医美/二级页面/首页_预约挂号.html">
					<div class="mainOne_div1">
						<img src="img/时间3.png" alt="" srcset="">
						<p>预约挂号</p>
					</div>
				</a>
				<a href="../医美/二级页面/首页_预约挂号.html">
					<div class="mainOne_div1">
						<img src="img/医院&卫生服务中心 (2).png" alt="" srcset="">
						<p>门诊排班</p>
					</div>
				</a>
				<a href="../医美/二级页面/首页_就医指南.html">
					<div class="mainOne_div1">
						<img src="img/问题 (1).png" alt="" srcset="">
						<p>就医指南</p>
					</div>
				</a>
				<a href="../医美/二级页面/首页_联系我们.html">
					<div class="mainOne_div1">
						<img src="img/联系我们 (1).png" alt="" srcset="">
						<p>联系我们</p>
					</div>
				</a>
			</div>
		</div>
		<div class="kong"></div>
		<!-- 真实故事 -->
		<div class="mainTwo">
			<div class="box_one_text">
				<span>真实故事</span>
			</div>
			<div class="mainTwo_div">
				<div class="mainTwo_div1">
					<img src="img/index1.jpg" alt="" srcset="">
				</div>
				<div class="mainTwo_div2">
					<img src="img/index2.jpg" alt="" srcset="">
					<img src="img/index3.jpg" alt="" srcset="">
				</div>
				<div class="mainTwo_div3">
					<img src="img/index4.jpg" alt="" srcset="">
				</div>
			</div>
		</div>
		<!-- 多种多样 -->
		<div class="mainThree">
			<div class="box_one_text">
				<span>多种多样</span>
			</div>
			<div class="mainThree_div">
				<div class="mainThree_div1">
					<img src="img/index_dzdy.jpg" alt="" srcset="">
				</div>
				<div class="mainThree_div2">
					<div id="card">
						<div class="dzdy_box">
							<div innerText="整形美容" v-on:click="dian">整形美容</div>
							<div innerText="玻尿酸" v-on:click="dian">玻尿酸</div>
							<div innerText="微整形" v-on:click="dian">微整形</div>
							<div innerText="口腔美容" v-on:click="dian">口腔美容</div>
						</div>
						<div>
							<div v-show="text=='整形美容'">
								<div class="dzdyone">
									<img src="img/index5.png">
									<p>眼部整形&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;鼻部整形&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;胸部整形&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;面部轮廓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;细致瘦身
									</p>
								</div>
								<div class="dzdyone">
									<img src="img/index6.png">
									<p>下颌角整形&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;私密整形&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;小耳再造&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;唇部整形&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;疤痕修复
									</p>
								</div>
							</div>
							<div v-show="text=='玻尿酸'">这是玻尿酸</div>
							<div v-show="text=='微整形'">这是微整形</div>
							<div v-show="text=='口腔美容'">这是口腔美容</div>
						</div>
					</div>
				</div>
			</div>

			<script type="text/javascript">
				let card = new Vue({
					el: '#card',
					data: {
						text: '整形美容',

					},
					methods: {
						dian: function(e) {
							console.log(e)
							this.text = e.target.innerHTML
						}
					}
				})
			</script>


			<div class="mainThree_divtwo">
				<div>整形</div>
				<div>美容</div>
				<div>科技</div>
				<div>技术</div>
			</div>
		</div>
		<!-- 广告 -->
		<div class="lastGg">
			<div class="lastGg_div">
				<div class="ggDiv1">
					<p class="ggDiv1_p1">····</p>
					<p class="ggDiv1_p2">为您提供最专业的</p>
					<p class="ggDiv1_p3">包装整体解决方案</p>
					<p class="ggDiv1_p4">····</p>
				</div>
				<div class="ggDiv2">
					<img src="img/index-gg.jpg" alt="">
				</div>
			</div>
		</div>
		<!-- 底部 -->
		<div id="footer">
			<div class="foot">
				<div class="footOne">
					<h3>联系我们</h3>
					<p>官网：www.11pic.com</p>
					<p>微信/ 手机：888-8888888</p>
					<p>热线电话：888-8888888</p>
					<p>地址：泰安市天平湖区888号</p>
				</div>
				<div class="footTwo">
					<img src="img/navlog2.png" alt="" srcset="">
				</div>
				<div class="footThree">
					<img src="img/footewm.jpg" alt="" srcset="">
				</div>
			</div>
		</div>
	</body>
</html>
